@config.main(" Browse") {

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("Browse")

            <div class="main-body">
            @components.table()
            </div>
        </div>
    </div>

    <script>

            $(function () {

                let json = [
                    {"field": "func", "title": "Function"},
                    {"field": "snp", "title": "GWAS SNP"},
                    {"field": "qtl", "title": "QTL"}
                ]

                let checkbox = ""
                $.each(json, (i, v) => {

                    checkbox += `<div class="form-check"><label class="form-check-label">
                            <input type='checkbox' checked='checked' value="${v.field}"  onclick="setColumns('${v.field}')" id="${v.field}"> ${v.title}
                           <i class="input-helper"></i> </label></div>`
                })

                $("#table-check").html(checkbox)

                $("#table").bootstrapTable({
                    method: "post",
                    url: "@routes.BrowseController.getAllGenome()",
                    sidePagination: "server",
                    contentType: "application/x-www-form-urlencoded"
                })

                $.each(json,(i,v)=>{
                    $("#" + v.field).click()
                })


            })

            function GetGeneId(value, row) {
                return `<a href="/capdb/browse/geneInfoPage?id=${row.id}" target="_blank">${value}</a>`
            }

    </script>

}